<template>
  <el-row :gutter="20" class="content">
    <el-col :span="8">
      <div class="grid-content ep-bg-purple">       
          <div id="top"></div>
          <div id="bottom"></div>                   
      </div>
    </el-col>
    <el-col :span="16">
      <div class="grid-content ep-bg-purple">
        <div id="right"></div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted , onBeforeUnmount} from "vue";



let myChart :any;
let option1 = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    top: '4%' ,
    data: ['普通事件', '道路事件', '水利事件', '重要事件', '已解决事件']
  },
  // grid: {
  //   left: '3%',
  //   right: '4%',
  //   bottom: '3%',
  //   containLabel: true
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '普通事件',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '道路事件',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '水利事件',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '重要事件',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '已解决事件',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
      }
let option2 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: '5%',
    left: 'left',
    orient: 'vertical',
    textStyle: {
      fontSize:8
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 0,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '普通事件' },
        { value: 484, name: '关注事件' },
        { value: 300, name: '重要事件' }
      ]
    }
  ]
      }
let option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [62, 87, 65, 53, 42, 57, 68]
          }
        ]
      }
let chartsArr :any[]=[];
const initcharts1 = () => {
  const right = document.getElementById('right')
    // 基于准备好的dom，初始化echarts实例
    
    if(right) {
      const myChart1 = echarts.init(right);
      // 绘制图表
    myChart1.setOption(option1);
    chartsArr.push(myChart1);
    }
}

const initcharts2 = () => {
  const top = document.getElementById('top')
  if(top) {
      const myChart2 = echarts.init(top);
      // 绘制图表
    myChart2.setOption(option2);
    chartsArr.push(myChart2);
    }
}
const initcharts3 = () => {
  const bottom = document.getElementById('bottom')
  if(bottom) {
      const myChart3 = echarts.init(bottom);
      // 绘制图表
    myChart3.setOption(option3);
    chartsArr.push(myChart3);
    }
}    
 
onMounted(()=>{
  initcharts1();
  initcharts2();
  initcharts3();
  window.onresize=function(){
 
 for(var i=0;i<chartsArr.length;i++){
     chartsArr[i].resize();
     }
} 
})
onBeforeUnmount(()=>{
  myChart.dispose()
})
</script>

<style>

.el-row:last-child {
  margin-bottom: 0;
}
.el-col-6 , .el-col-18{
  border-radius: 4px;
  height: 100%;
  
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 100%;
  background-color: #fff;
  /* margin-top: 10px;
  margin-bottom: 10px; */
}
.content {
  background-color: #eee;
  height: 100%;
  padding: 20px 10px;
}
#right {
  height: 100%;
  width: 100%;
  }
  #top {
    height: 50%; 
    margin-bottom: 10px;
    width: 100%;
  }
#bottom {
  height: 45%;
  width: 100%;
}
</style>
